*
{
    margin: 0;
    padding: 0;
}

body
{
    position: relative;
}
/* 设置div盒子大小 */
div
{
    display: flex;
    width: 100vw;
    height: 100vh;
    flex-direction: row;
    /* 溢出图像隐藏 */
    overflow: hidden;
    
}

img
{
    
    width: 100%;
    height: 100%;
    animation: img_move 12s linear 1s infinite;
}

/* 动画效果 */
@keyframes img_move
{
    /* 第一张图片过渡第二张 */
    0%
    {
        transform: translate(0,0);
    }
    22%
    {
        transform: translate(-100vw,0);
    }
    /* 暂停 */
    33%
    {
        transform: translate(-100vw,0);
    }
    /* 第二张图片过渡第三张 */
    55%
    {
        transform: translate(-200vw,0);
    }
    /* 暂停 */
    66%
    {
        transform: translate(-200vw,0);
    }
    /* 第三张图片过渡第四张 */
    88%
    {
        transform: translate(-300vw,0);
    }
    /* 暂停 */
    100%
    {
        transform: translate(-300vw,0);
    }

}

